import React, { useEffect, useRef, useState } from 'react';
import '../../assets/css/Echart/OutpatientEchart.css'

import * as echarts from "echarts";
function OutpatientEchart(props: any) {

    console.log(location);
    const chartfirstRef = useRef(null);
    const chartsecoundRef = useRef(null);
    const chartRanking = useRef(null)
    const chartmanage = useRef(null)
    const chartmanages = useRef(null)
    const chartstats = useRef(null)
    const chartLine = useRef(null)
    const chartpie = useRef(null)
    useEffect(() => {
        const chartDom = chartfirstRef.current;
        const myChart = echarts.init(chartDom);
        let colorList = ['#23D5F0', '#39FFC0', '#E5C327', '#fff', '#fff', '#fff', '#fff']
        let result = [
            { name: '内科', value: 722 },
            { name: '外科', value: 681 },
            { name: '产妇科', value: 481 },
            { name: '小儿科', value: 271 },
            { name: '五官科', value: 120 },
            { name: '泌尿科', value: 88 },
            { name: '骨科', value: 51 },
        ]
        const option = {
            color: colorList,
            backgroundColor: '#03171F',
            tooltip: {
                show: false,
                trigger: 'item',
                padding: [8, 15],
                backgroundColor: 'rgba(12, 51, 115,0.8)',
                borderColor: 'rgba(3, 11, 44, 0.5)',
                textStyle: {
                    color: '#9bb2de'
                }
            },
            legend: {
                show: false
            },
            grid: {
                left: '20%',
                right: '10%',
                top: '10%',
                bottom: '10%'
            },
            xAxis: [
                {
                    splitLine: {
                        show: false
                    },
                    type: 'value',
                    show: false,
                }
            ],
            yAxis: [
                {
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    type: 'category',
                    axisTick: {
                        show: false
                    },
                    inverse: true,
                    data: result.map(item => item.name),
                    axisLabel: {
                        formatter: (name: any, index: number) => {
                            const id = index + 1
                            if (id < 4) {
                                return ` {No${id}|${'No.'}}{rank${id}|${id}}`
                            } else {
                                return ` {No|${'No.'}}{rank|${id}}`
                            }
                        },
                        rich: {
                            rank1: {
                                fontSize: 15,
                                fontFamily: 'YouSheBiaoTiHei',
                                align: 'center',
                                color: colorList[0],
                            },
                            rank2: {
                                fontSize: 15,
                                fontFamily: 'YouSheBiaoTiHei',
                                align: 'center',
                                color: colorList[1]
                            },
                            rank3: {
                                fontSize: 15,
                                fontFamily: 'YouSheBiaoTiHei',
                                align: 'center',
                                color: colorList[2]
                            },
                            rank: {
                                fontSize: 15,
                                fontFamily: 'YouSheBiaoTiHei',
                                align: 'center',
                                color: colorList[3]
                            },
                            No1: {
                                fontSize: 15,
                                fontFamily: 'YouSheBiaoTiHei',
                                align: 'center',
                                color: colorList[0],
                                verticalAlign: 'bottom'
                            },
                            No2: {
                                fontSize: 15,
                                fontFamily: 'YouSheBiaoTiHei',
                                align: 'center',
                                color: colorList[1],
                                verticalAlign: 'bottom'
                            },
                            No3: {
                                fontSize: 15,
                                fontFamily: 'YouSheBiaoTiHei',
                                align: 'center',
                                color: colorList[2],
                                verticalAlign: 'bottom'
                            },
                            No: {
                                fontSize: 15,
                                fontFamily: 'YouSheBiaoTiHei',
                                align: 'center',
                                color: colorList[3],
                                verticalAlign: 'bottom'
                            }
                        }
                    }
                }
            ],
            series: [
                {
                    name: '',
                    type: 'bar',
                    barWidth: 8, // 柱子宽度
                    MaxSize: 0,
                    showBackground: false,

                    // 名称---
                    label: {
                        show: true,
                        offset: [10, -10], // 将标签上移20个像素
                        color: '#ccc',
                        fontWeight: 400,
                        position: 'left',
                        align: 'left',
                        fontSize: 12,
                        fontFamily: 'YouSheBiaoTiHei',
                        formatter: function (params: { data: { name: any; }; }) {
                            return params.data.name
                        }
                    },
                    data: result.map((item, index) => {
                        return {
                            name: item.name,
                            value: item.value,
                            itemStyle: {

                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 1,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: '#0F1F45'
                                        },
                                        {
                                            offset: 1,
                                            color: colorList[index]
                                        }
                                    ]
                                }
                            }
                        }
                    })
                },
                {
                    name: '',
                    type: 'bar',
                    barGap: '-100%',
                    barWidth: 8, // 柱子宽度
                    showBackground: false,

                    // 名称
                    label: {
                        position: 'right',
                        distance: 4,
                        show: true,
                        offset: [0, 0], // offset: [0, -20] 将标签上移20个像素
                        formatter: function (params: { data: { value: string; }; }) {
                            return '{a|' + params.data.value + '}'
                        },
                        rich: {
                            align: 'left',
                            a: {
                                color: '#00D1FF',
                                fontSize: 15,
                                fontFamily: 'UnidreamLED',
                                fontWeight: 500
                            },
                            b: {
                                color: '#00D1FF',
                                fontSize: 12,
                                verticalAlign: 'bottom'
                            }
                        }
                    },
                    data: result.map((item, index) => {
                        return {
                            name: item.name,
                            value: item.value,
                            itemStyle: {
                                borderRadius: [30, 30, 30, 30],
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 1,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: '#0F1F45'
                                        },
                                        {
                                            offset: 1,
                                            color: colorList[index]
                                        }
                                    ]
                                }
                            }
                        }
                    })
                }
            ]
        }
        myChart.setOption(option);
        return () => {
            myChart.dispose();
        };
    }, [])
    useEffect(() => {
        const chartDom = chartsecoundRef.current;
        const myChart = echarts.init(chartDom);
        let myData3 = [
            "青霉素类",
            "头孢类",
            "氨基糖苷类",
            "氨基糖苷类",
            "氨基糖苷类",
            "其他抗生素"
        ];
        let seriesData = [
            {
                name: '本月',
                data: [40, 30, 20, 20, 20, 25],
                colors: ['#2AF2E7', 'rgba(50, 253, 232, 0)']
            },
            {
                name: '上月',
                data: [28, 25, 13, 13, 13, 15],
                colors: ['rgba(50, 180, 254, 1)', 'rgba(50, 180, 254, 0)']
            }
        ]

        let series = seriesData.map(item => {
            return {
                data: item.data,
                name: item.name,
                type: "bar",
                barWidth: "10px",
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: item.colors[0],
                            },

                            {
                                offset: 1,
                                color: item.colors[1],
                            },
                        ]),
                    },
                },
                label: {
                    show: false,
                    position: "top",
                    fontSize: 12,
                    color: "#F5F5F5",
                    offset: [0, -5],
                    formatter: "{c}",
                },
            }
        })

        let option = {
            backgroundColor: "#03171F",
            legend: {
                icon: "rect",
                itemWidth: 14,
                itemHeight: 10,
                itemGap: 20,
                textStyle: {
                    fontSize: 11,
                    color: "#fff",
                },
                data: seriesData.map(item => { return item.name }),
                selectedMode: false,
            },
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "shadow",
                    textStyle: {
                        color: "#fff",
                    },
                },
                textStyle: {
                    color: "#fff",
                },
                backgroundColor: "rgba(17,95,182,0.5)", //设置背景颜色
                formatter: function (x: any, y: any, z: any, k: any) {
                    console.log(x, y, z, k)
                },
            },
            grid: {
                left: "3%",
                right: "3%",
                bottom: "1%",
                top: "18%",
                containLabel: true,
            },
            xAxis: {
                type: "category",
                data: myData3,
                axisPointer: {
                    type: "shadow",
                },
                axisLabel: {
                    color: "rgba(255, 255, 255, .8)",
                    interval: 0,
                    margin: 15,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(45, 67, 119, 0.8)",
                    },
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
            },
            yAxis: {
                type: "value",
                name: "单位（kMh）",
                nameTextStyle: {
                    color: "#fff",
                    fontSize: 11,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(45, 67, 119, 0.8)",
                    },
                },
                min: 0,
                axisLabel: {
                    show: true,
                    color: "#fff",
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        width: 0.5,
                        color: "rgba(45, 67, 119, .5)",
                        type: "dashed",
                    },
                },
            },
            series: series
        };
        myChart.setOption(option);
        return () => {
            myChart.dispose();
        };
    }, [])
    useEffect(() => {
        const chartDom = chartRanking.current;
        const myChart = echarts.init(chartDom);
        const data = [
            { label: "急诊科", peri: 2, do: 7 },
            { label: "妇产科", peri: 1, do: 5 },
            { label: "儿科", peri: 4, do: 4 },
            { label: "肿瘤科", peri: 2, do: 3 },
            { label: "骨科", peri: 3, do: 2 },
            { label: "神经外科", peri: 1, do: 1 },
        ]
        /** @description对象数组根据某个字段进行排序
          * arr 对象数组
          * prop 字段
          * 使用 objArrSort(list,'aaa')
          */
        const objArrSort = (arr: { label: string; peri: number; do: number; }[], prop: string) => {
            return [...arr].sort((a, b) => b[prop] - a[prop]);
        };
        const chartData = objArrSort(data, 'do')
        console.log(chartData)
        // 颜色 前三个不同颜色 非前三一种颜色
        var colorList = [
            ["#06242A", "#3EFFE8"],
            ["#06242A", "#3EB9FF"],
            ["#06242A", "#EEA424"],
            ["#06242A", "#ACB6B9"]
        ];

        const XData = chartData.map(item => item.label)
        const YData: any[] = []
        chartData.map((item, index) => {
            YData.push(
                {
                    value: item.do,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                            offset: 0,
                            color: index < 3 ? colorList[index][1] : colorList[3][1]
                        },
                        {
                            offset: 1,
                            color: index < 3 ? colorList[index][0] : colorList[3][0]
                        }
                        ]),
                    }
                },
            )
        })

        const option = {
            backgroundColor: "#012337",
            //你的代码
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                show: true,
                top: 7,
                right: 10,
                // data: ["", ""],
            },
            grid: {
                top: 30,
                left: 100,
                bottom: 50,
                right: 50
            },
            xAxis: {
                type: 'value',
                position: "top",
                // 字体样式
                axisLabel: {
                    fontSize: 15,       // 字体大小
                    //   fontStyle: 'italic', // 字体风格
                    //   fontWeight: 'bold', // 字体粗细
                    //   rotate: 45,          // 旋转角度
                    color: '#66FFFF',   // 字体颜色
                },
                // 网格线样式
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(102,255,255,.5)', // 线颜色
                        width: 1,         // 线宽
                        type: 'solid'    // 线类型
                    }
                }
            },

            yAxis: {
                type: 'category',
                data: XData,
                inverse: true,  // 反转 y 轴，使原点在左上角
                axisTick: {
                    alignWithLabel: true
                },
                // 字体样式
                axisLabel: {
                    fontSize: 12,       // 字体大小
                    //   fontStyle: 'italic', // 字体风格
                    //   fontWeight: 'bold', // 字体粗细
                    //   rotate: 45,          // 旋转角度
                    color: '#66FFFF',   // 字体颜色
                },
                // 网格线样式
                // splitLine: {
                //   show: true,
                //   lineStyle: {
                //     color: '#FF0000', // 线颜色
                //     width: 2,         // 线宽
                //     type: 'dashed'    // 线类型
                //   }
                // }
            },

            series: [
                {
                    name: "",
                    data: YData,
                    type: 'bar',
                    barWidth: 8,
                    // label: {
                    //   show: true,
                    //   position: 'right',
                    // },
                    itemStyle: {
                        normal: {
                            show: true,

                        }
                    }
                },
            ]
        };
        // 其他各种图表一个原理
        let index = 0;
        // 全部都适用 pie、bar、line
        setInterval(function () {
            // 数据的长度
            if (index >= option.series[0].data.length) {
                index = 0;
            }
            myChart.dispatchAction({
                type: "showTip", // 提示框
                seriesIndex: 0,
                dataIndex: index // 对第几个进行提示
            });
            index += 1;
        }, 2000);
        myChart.setOption(option);
        return () => {
            myChart.dispose();
        };
    }, [])
    const rankingData = [
        { id: 1, department: '急诊科', person: 3214, revenue: '62313', percentage: '14%' },
        { id: 2, department: '儿科', person: 4213, revenue: '35231', percentage: '35%' },
        { id: 3, department: '发热门诊', person: 3231, revenue: '52312', percentage: '66%' },
        { id: 4, department: '血透中心', person: 1521, revenue: '66231', percentage: '74%' },
        { id: 5, department: '儿科急诊', person: 8313, revenue: '23314', percentage: '54%' },
        { id: 6, department: '消化内科', person: 4421, revenue: '54421', percentage: '62%' },
        { id: 7, department: '便民门诊', person: 6513, revenue: '43213', percentage: '41%' },
        { id: 8, department: '呼吸科', person: 2223, revenue: '45332', percentage: '32%' },
        { id: 9, department: '心血管内科', person: 6213, revenue: '62312', percentage: '12%' },
    ]
    useEffect(() => {
        const chartDom = chartmanage.current;
        const myChart = echarts.init(chartDom);
        const option = {
            "legend": {
                /*"x": "right",*/
                right: 40,
                "textStyle": {
                    "color": "white",
                    "fontSize": 14
                },
                "top": -5,
                "itemWidth": 20,
                "itemHeight": 10,
                "itemGap": 20
            },
            "color": [
                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: 'rgba(25, 205, 255, 1)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(25, 205, 255, 0.35)'
                        }
                    ]
                },
                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: 'rgba(66, 255, 185, 1)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(66, 255, 185, 0.35)'
                        }
                    ]
                },
                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#0A2A35'
                        },
                        {
                            offset: 1,
                            color: '#0A2A35'
                        }
                    ]
                },
                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: 'rgba(255, 90, 0, 1)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(255, 90, 0, 0.35)'
                        }
                    ]
                },
            ],
            "backgroundColor": "#1B232E",
            "tooltip": {
                "trigger": "axis",
                "axisPointer": {
                    "type": "shadow"
                },
                textStyle: {
                    color: "rgba(255, 255, 255, 1)"
                },
                backgroundColor: "rgba(0,0,0,0.8)",
                borderColor: "rgba(219, 230, 255, 0.8)",

            },
            xAxis: {
                "data": [
                    "07-21", "07-21", "07-21", "07-21", "07-21", "07-21"
                ],
                //name: '日',
                axisLabel: {
                    color: "#A9AEB2"//单位值的颜色
                },
                axisLine: {
                    lineStyle: {
                        color: '#A9AEB2'//轴线和单位颜色
                    }
                },
                axisTick: {//刻度颜色
                    lineStyle: {
                        color: '#A9AEB2'
                    }
                }
            },
            yAxis: {
                name: '单位',
                axisLabel: {
                    color: "#A9AEB2"
                },
                axisLine: {
                    lineStyle: {
                        color: '#A9AEB2'
                    }
                },
                axisTick: {
                    lineStyle: {
                        color: '#A9AEB2'
                    }
                },
                splitLine: {
                    "show": true,
                    "lineStyle": {
                        "color": [
                            "#43485E"
                        ],
                        "width": 1,
                        "type": "solid"
                    },
                },
                grid: {
                    bottom: 100
                },
            },
            series: [
                {
                    name: "数据1",
                    type: "bar",
                    stack: "total",
                    label: {
                        show: false,
                        color: "#FFFFFF",
                        formatter: function (e: any) {
                            // return e.value ? e.value : "";
                            // return e.value ? e.seriesName : "";
                        },
                    },
                    itemStyle: {
                        borderRadius: [0, 0, 0, 0],
                    },
                    barWidth: 20,
                    emphasis: {
                        focus: "series",
                    },
                    data: [60, 125, 125, 140, 60, 60],
                },
                {
                    name: "数据2",
                    type: "bar",
                    stack: "total",
                    label: {
                        show: false,
                        color: "#FFFFFF",
                        formatter: "{a}",
                    },
                    emphasis: {
                        focus: "series",
                    },
                    data: [90, 70, 30, 110, 90, 90],
                },
                {
                    name: "",
                    type: "bar",
                    stack: "total",
                    label: {
                        show: false,
                        color: "#FFFFFF",
                        formatter: "{a}",
                    },
                    emphasis: {
                        focus: "series",
                    },
                    data: [150, 105, 145, 50, 150, 150],
                },
            ],
        }

        myChart.setOption(option);
        return () => {
            myChart.dispose();
        };
    }, [])
    useEffect(() => {
        const chartDom = chartmanages.current;
        const myChart = echarts.init(chartDom);
        const option = {
            title: {
                // text: '热源实时流量',
                textStyle: {
                    align: 'center',
                    color: '#fff',
                    fontSize: 20,
                },
                top: '3%',
                left: '10%',
            },
            backgroundColor: '#03171F',
            grid: {
                top: "15%",
                bottom: "10%"//也可设置left和right设置距离来控制图表的大小
            },
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "shadow",
                    label: {
                        show: false, //X轴的
                    }
                }
            },
            legend: {
                data: ["数据1", "数据2"],
                top: "0%",
                textStyle: {
                    color: "#ffffff"
                }
            },
            xAxis: {
                data: [
                    "2016年",
                    "2017年",
                    "2018年",
                    "2019年",
                    "2020年",
                    "2021年"
                ],
                // axisLine: {
                //     show: true, //隐藏X轴轴线
                //     lineStyle: {
                //                 color: '#30538A'
                //                 }
                // },
                axisLine: { show: true, symbol: ['none', 'arrow'], lineStyle: { color: '#CBDDF4' } },
                axisTick: {
                    show: true //隐藏X轴刻度
                },
                axisLabel: {
                    show: true,

                    textStyle: {
                        color: "#CBDDF4" //X轴文字颜色
                    }
                },

            },
            yAxis: [
                {
                    type: "value",
                    // name: "榀",
                    // nameTextStyle: {
                    //     color: "#BADBFB",
                    //     fontSize:15
                    // },
                    splitLine: {
                        show: true
                    },
                    axisTick: {
                        show: false
                    },


                    axisLine: {
                        show: true,
                        symbol: ['none', 'arrow'],
                        lineStyle: { color: '#CBDDF4' }
                    },
                    axisLabel: {
                        show: true,

                        textStyle: {
                            color: "#BADBFB"
                        },
                        formatter: function (value: any) {
                            // 在标签后面添加百分号
                            return value;
                        },
                    },

                },


            ],
            series: [{
                name: "数据1",
                type: "bar",
                // yAxisIndex: 1,
                // barGap:'100%',
                barWidth: 15,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                smooth: true, //平滑曲线显示
                showAllSymbol: true, //显示所有图形。
                symbol: "circle", //标记的图形为实心圆
                //  color: '#FF8247',


                itemStyle: {
                    normal: {
                        color: "#04433E"
                    },
                },
                data: [160, 125, 240, 280, 150, 50]
            },
            {
                name: "数据2",
                type: "line",
                barWidth: 15,
                showSymbol: true,
                symbolSize: 10,
                itemStyle: {
                    normal: {
                        color: "#09C7F6",
                    },
                },
                data: [160, 125, 240, 280, 150, 50]
            }
            ]
        };
        myChart.setOption(option);
        return () => {
            myChart.dispose();
        };
    }, [])
    useEffect(() => {
        const chartDom = chartstats.current;
        const myChart = echarts.init(chartDom);
        let myData1 = ['2016年', '2017年', '2018年', '2019年', '2020年', '2021年'];
        let hj = [40, 75, 160, 75, 125, 90];
        let sn = [150, 50, 260, 110, 160, 95];
        let sw = [150, 50, 260, 110, 160, 95];
        const option = {
            backgroundColor: '#03171F',
            tooltip: {
                show: true,
                trigger: 'axis',
                textStyle: {
                    color: '#fff',
                    fontSize: 14
                },
                backgroundColor: 'rgba(18, 57, 60, .8)', //设置背景颜色
                axisPointer: {
                    lineStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(0, 255, 233,0)'
                            }, {
                                offset: 0.5,
                                color: 'rgba(255, 255, 255,1)',
                            }, {
                                offset: 1,
                                color: 'rgba(0, 255, 233,0)'
                            }],
                            global: false
                        }
                    },
                },
                borderColor: "rgba(18, 57, 60, .8)",
                // formatter: "{b}人员类别统计<br>{c}人"
                formatter: function (params: string | any[], ticket: any, callback: any) {
                    var htmlStr = '';
                    for (var i = 0; i < params.length; i++) {
                        var param = params[i];
                        var xName = param.name + '各乡镇来渭返谓人数'; //x轴的名称
                        var seriesName = param.seriesName; //图例名称
                        var value = param.value; //y轴值
                        var color = param.color; //图例颜色
                        if (i === 0) {
                            htmlStr += xName + '<br/>'; //x轴的名称
                        }
                        htmlStr += '<div>';
                        htmlStr +=
                            '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
                            color + ';"></span>'; //一个点
                        htmlStr += seriesName + '：' + value + '人'; //圆点后面显示的文本
                        htmlStr += '</div>';
                    }
                    return htmlStr;
                }
            },
            color: ['#09F6FF', '#3E50FB', '#50D9A5',],
            legend: {
                // icon: 'circle',
                // itemWidth: 10,
                itemGap: 4,
                x: 'right',
                top: '3%',
                textStyle: {
                    color: '#fff',
                    fontSize: 13,
                    // padding:[0, 6, 0, 6],
                }
            },
            grid: {
                top: '18%',
                left: '1%',
                right: '4%',
                bottom: '10%',
                containLabel: true,
            },
            xAxis: [{
                type: 'category',
                axisLine: {
                    lineStyle: {
                        color: '#1C82C5'
                    }
                },
                axisLabel: {
                    interval: 0,
                    align: 'center',
                    rotate: '1',
                    margin: '25',
                    textStyle: {
                        fontSize: 13,
                        color: '#fff'
                    }
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false
                },
                boundaryGap: false,
                data: myData1, //this.$moment(data.times).format("HH-mm") ,
            },],

            yAxis: [{
                type: 'value',
                min: 0,
                max: 300,
                splitNumber: 6,
                axisLine: {
                    lineStyle: {
                        color: '#1C82C5'
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(28, 130, 197, .3)',
                        type: 'solid'
                    },
                },
                axisLabel: {
                    color: '#DEEBFF',
                    textStyle: {
                        fontSize: 12
                    }
                },
                axisTick: {
                    show: false
                }
            },],
            series: [{
                name: '数据1',
                type: 'line',
                showSymbol: true,
                symbolSize: 8,
                lineStyle: {
                    normal: {
                        color: '#09F6FF',
                    },
                },
                itemStyle: {
                    color: '#09F6FF',
                    borderColor: '#09F6FF',
                    borderWidth: 2,
                },
                // emphasis: {
                //     itemStyle: {
                //         color: "#fff",
                //         borderColor: "#FF2E2E",
                //         borderWidth: 2,
                //     },
                // },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [{
                                offset: 0,
                                color: 'rgba(9, 246, 255, .8)',
                            },
                            {
                                offset: 1,
                                color: 'rgba(9, 246, 255, .2)',
                            },
                            ],
                            false
                        ),
                    },
                },
                data: hj, //data.values
            },
            // {
            // 	name: '省内',
            // 	type: 'line',
            // 	showSymbol: true,
            // 	symbolSize: 8,
            // 	lineStyle: {
            // 		normal: {
            // 			color: '#3E50FB',
            // 		},
            // 	},
            // 	itemStyle: {
            // 		color: '#3E50FB',
            // 		borderColor: '#3E50FB',
            // 		borderWidth: 2,
            // 	},
            // 	// emphasis: {
            // 	//     itemStyle: {
            // 	//         color: "#fff",
            // 	//         borderColor: "#F39800",
            // 	//         borderWidth: 2,
            // 	//     },
            // 	// },
            // 	areaStyle: {
            // 		normal: {
            // 			color: new echarts.graphic.LinearGradient(
            // 				0,
            // 				0,
            // 				0,
            // 				1,
            // 				[{
            // 						offset: 0,
            // 						color: 'rgba(62, 80, 251, .8)',
            // 					},
            // 					{
            // 						offset: 1,
            // 						color: 'rgba(62, 80, 251, .2)',
            // 					},
            // 				],
            // 				false
            // 			),
            // 		},
            // 	},
            // 	data: sn, //data.values
            // },
            {
                name: '数据2',
                type: 'line',
                showSymbol: true,
                symbolSize: 8,
                lineStyle: {
                    normal: {
                        color: '#50D9A5',
                    },
                },
                itemStyle: {
                    color: '#50D9A5',
                    borderColor: '#50D9A5',
                    borderWidth: 2,
                },
                // emphasis: {
                //     itemStyle: {
                //         color: "#fff",
                //         borderColor: "#16D6FF",
                //         borderWidth: 2,
                //     },
                // },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [{
                                offset: 0,
                                color: 'rgba(80, 217, 165, .8)',
                            },
                            {
                                offset: 1,
                                color: 'rgba(80, 217, 165, .2)',
                            },
                            ],
                            false
                        ),
                    },
                },
                data: sw, //data.values
            }
            ],
        };
        myChart.setOption(option);
        return () => {
            myChart.dispose();
        };
    }, [])
    useEffect(() => {
        const chartDom = chartLine.current;
        const myChart = echarts.init(chartDom);
        const option = {
            backgroundColor: '#03171F',
            xAxis: {
                data: ['2016年', '2017年', '2018年', '2019年', '2020年', '2021年'],
                axisLine: {
                    lineStyle: {
                        color: '#3d5269'
                    }
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: 14
                }
            },
            yAxis: {
                name: "单位",
                nameTextStyle: {
                    color: '#fff',
                    fontSize: 16
                },
                axisLine: {
                    lineStyle: {
                        color: '#3d5269'
                    }
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: 14
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#2d3d53'
                    }
                },
                interval: 50,

            },
            series: [{
                type: 'pictorialBar',//象形柱图
                barWidth: 50,
                symbol: 'triangle',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#5ef3ff'
                        }, {
                            offset: 1,
                            color: '#06a4f4'
                        }], false)
                    }
                },
                label: {
                    normal: {
                        show: true,
                        fontSize: 14,
                        color: '#ffffff',
                        position: 'top',
                    }
                },
                data: [132, 98, 200, 262, 225, 163]
            }]
        };
        myChart.setOption(option);
        return () => {
            myChart.dispose();
        };
    }, [])
    useEffect(() => {
        const chartDom = chartpie.current;
        const myChart = echarts.init(chartDom);
        let data = [];
        let currentIndex = 0;
        let oldIndex;
        let barChartList = [{
            name: '数据展示1',
            value: 10
        },
        {
            name: '数据展示2',
            value: 30
        },
        {
            name: '数据展示3',
            value: 40
        },
        {
            name: '数据展示4',
            value: 25
        },
        {
            name: '数据展示5',
            value: 35
        },
        {
            name: '数据展示6',
            value: 40
        }
        ];
        const color = ['#FFC960', '#19D3D4', '#FF5150', '#62CDFC', '#169AFA', '#7CEEFF'];
        let total = Math.max(...barChartList.map(item => item.value))
        let gap = total * (6 / 360)
        for (var i = 0; i < barChartList.length; i++) {
            data.push(
                {
                    value: barChartList[i].value,
                    name: barChartList[i].name,
                    itemStyle: {
                        normal: {
                            borderColor: color[i],
                            shadowColor: color[i],
                            color: color[i],
                        }
                    }
                },
                {
                    value: gap,
                    name: '',
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            },
                            color: 'rgba(0, 0, 0, 0)',
                            borderColor: 'rgba(0, 0, 0, 0)',
                            borderWidth: 0
                        }
                    },
                    emphasis: {
                        label: {
                            show: false
                        }
                    }
                }
            );
        }
        let seriesOption = [
            {
                name: 'pie1',
                type: 'pie',
                radius: [70, 100],
                center: ['30%', '50%'],
                grid: {
                    containLabel: true
                },
                label: {
                    show: false,
                    position: 'center',
                    formatter: '{b_style|179}\n{c_style|{b}}',
                    rich: {
                        b_style: {
                            fontSize: 28,
                            fontWeight: 'bold',
                            color: '#fff'
                        },
                        c_style: {
                            padding: [0, 0, 10, 0],
                            fontSize: 15,
                            color: '#fff'
                        }
                    }
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '14',
                        fontWeight: 'normal'
                    }
                },
                labelLine: {
                    show: false
                },
                data: data
            }
        ];
        let optionRich = {
            a: {
                width: 50,
                fontSize: 18,
                fontWeight: 400,
                color: '#FFF',
                lineHeight: 20,
                padding: [0, 50, 0, 0]
            },
        }

        barChartList.forEach((ele, i) => {
            optionRich[i] = {
                width: 20,
                fontSize: 18,
                fontWeight: 400,
                lineHeight: 20,
                color: '#FFF',
                align: 'center',
                padding: [0, 0, 0, 20]
            }
        });
        console.log(optionRich)
        const option = {
            backgroundColor: '#011234',
            color: color,
            tooltip: {
                show: false
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                left: '50%',
                align: 'left',
                top: 'middle',
                icon: 'circle',
                itemHeight: 15,
                itemWidth: 15,
                itemGap: 20,
                height: 300,
                data: barChartList,
                formatter: function (name: string) {
                    let index = 0
                    let value = 0;
                    let rate = 0;
                    for (let i = 0; i < barChartList.length; i++) {
                        if (barChartList[i].name == name) {
                            value = barChartList[i].value ? barChartList[i].value : 0;
                            rate = (total / barChartList[i].value).toFixed(0);
                            index = i;
                        }
                    }
                    return `{a|${name}}同比增长{${index}|${2 + '%'}}`
                },
                textStyle: {
                    color: '#fff',
                    rich: optionRich
                }
            },
            series: seriesOption
        };

        myChart.on('mouseover', (params) => {
            oldIndex = currentIndex;
            currentIndex = params.dataIndex;
            highlightPie(currentIndex, oldIndex);
        })
        function highlightPie(currentIndex: number, oldIndex: number) {
            myChart.dispatchAction({
                type: 'downplay',
                seriesIndex: 0,
                dataIndex: oldIndex
            })
            myChart.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: currentIndex
            })
        }
        setTimeout(() => {
            highlightPie(0, 1);
        }, 50)
        myChart.setOption(option);
        return () => {
            myChart.dispose();
        };
    }, [])
    return (
        <>
            <div className='outpatient'>
                <div className='outpatient-left'>
                    <div className='outpatient-left-data'>
                        <div className='outpatient-left-data-top'>
                            <div className='data-top-title'>汇总数据</div>
                            <div className='data-top-content'>
                                <div className='data-top-content-card'>
                                    <div className='card-icon'></div>
                                    <div className='card-content'>
                                        <div className='card-content-title'>就诊人数</div>
                                        <div className='card-content-num'>
                                            <span className='num'>5213</span>
                                            <span className='icon'>人</span>
                                        </div>
                                    </div>
                                </div>
                                <div className='data-top-content-card'>
                                    <div className='card-icon'></div>
                                    <div className='card-content'>
                                        <div className='card-content-title'>人均费用</div>
                                        <div className='card-content-num'>
                                            <span className='num'>4211</span>
                                            <span className='icon'>元</span>
                                        </div>
                                    </div>
                                </div>
                                <div className='data-top-content-card'>
                                    <div className='card-icon'></div>
                                    <div className='card-content'>
                                        <div className='card-content-title'>人均费用</div>
                                        <div className='card-content-num'>
                                            <span className='num'>4211</span>
                                            <span className='icon'>元</span>
                                        </div>
                                    </div>
                                </div>
                                <div className='data-top-content-card'>
                                    <div className='card-icon'></div>
                                    <div className='card-content'>
                                        <div className='card-content-title'>医药占比</div>
                                        <div className='card-content-num'>
                                            <span className='num'>76</span>
                                            <span className='icon'>%</span>
                                        </div>
                                    </div>
                                </div>
                                <div className='data-top-content-card'>
                                    <div className='card-icon'></div>
                                    <div className='card-content'>
                                        <div className='card-content-title'>耗材占比</div>
                                        <div className='card-content-num'>
                                            <span className='num'>24</span>
                                            <span className='icon'>%</span>
                                        </div>
                                    </div>
                                </div>
                                <div className='data-top-content-card'>
                                    <div className='card-icon'></div>
                                    <div className='card-content'>
                                        <div className='card-content-title'>耗材占比</div>
                                        <div className='card-content-num'>
                                            <span className='num'>24</span>
                                            <span className='icon'>%</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className='outpatient-left-data-middle'>
                            <div className='data-middle-title'>汇总数据</div>
                            <div className='data-middle-content'>
                                <div ref={chartfirstRef} style={{ width: '32vw', height: '14vw' }} />
                            </div>
                        </div>
                        <div className='outpatient-left-data-bottom'>
                            <div className='data-bottom-title'>基药排名</div>
                            <div className='data-bottom-content'>
                                <div ref={chartsecoundRef} style={{ width: '32vw', height: '14vw' }} />
                            </div>
                        </div>
                    </div>
                    <div className='outpatient-left-ranking'>
                        <div className='outpatient-left-ranking-top'>
                            <div className='ranking-top-title'>门诊部门排行</div>
                            <div className='ranking-top-content'>
                                <div ref={chartRanking} style={{ width: '32vw', height: '11.5vw' }} />
                            </div>
                        </div>
                        <div className='outpatient-left-ranking-middle'>
                            <div className='ranking-middle-title'>门诊部门排行</div>
                            <div className='ranking-middle-content'>
                                <div className='ranking-middle-content-swiper'>
                                    <div className='swiper-next-icon'></div>
                                    <div className='swiper-img'>
                                        <div className='imgs'></div>
                                        <div className='imgs'></div>
                                        <div className='imgs'></div>
                                        <div className='imgs'></div>
                                        <div className='imgs'></div>
                                    </div>
                                    <div className='swiper-pre-icon'></div>
                                </div>
                                <div className='ranking-middle-content-ranking'>
                                    <div className='ranking-card'>
                                        <div className='ranking-card-img'></div>
                                        <div className='ranking-card-title'>人次数</div>
                                        <div className='ranking-card-num'>3141</div>
                                    </div>
                                    <div className='ranking-card'>
                                        <div className='ranking-card-img'></div>
                                        <div className='ranking-card-title'>人次数</div>
                                        <div className='ranking-card-num' style={{ color: '#29A2FF' }}>3141</div>
                                    </div>
                                    <div className='ranking-card' style={{ marginTop: '-1vw' }}>
                                        <div className='ranking-card-img'></div>
                                        <div className='ranking-card-title'>总收入</div>
                                        <div className='ranking-card-num' style={{ color: '#33F3DF' }}>11938175</div>
                                    </div>
                                    <div className='ranking-card'>
                                        <div className='ranking-card-img'></div>
                                        <div className='ranking-card-title'>药占比</div>
                                        <div className='ranking-card-num' style={{ color: '#FFC029' }}>24</div>
                                    </div>
                                    <div className='ranking-card'>
                                        <div className='ranking-card-img'></div>
                                        <div className='ranking-card-title'>药占比</div>
                                        <div className='ranking-card-num' style={{ color: '#B47726' }}>24</div>
                                    </div>
                                </div>
                                <div className='ranking-middle-content-list'>
                                    <table>
                                        <thead className='list-title'>
                                            <tr>
                                                <td>科室</td>
                                                <td>人次数</td>
                                                <td>收入</td>
                                                <td>药品</td>
                                            </tr>
                                        </thead>
                                        <tbody className='list-content'>
                                            {
                                                rankingData.map(v => (
                                                    <tr key={v.id}>
                                                        <td style={{ color: '#C5D0D4' }}>{v.department}</td>
                                                        <td style={{ color: '#258FE1' }}>{v.person}</td>
                                                        <td style={{ color: '#2CD1C2' }}>{v.revenue}</td>
                                                        <td style={{ color: '#DDA928' }}>{v.percentage}</td>
                                                    </tr>
                                                ))
                                            }
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className='outpatient-middle'>
                    <div className='outpatient-middle-card'>
                        <div className='card'>
                            <div className='card-title'>
                                <div className='title-image'></div>
                                <div className='title-name'>今日挂号数</div>
                            </div>
                            <div className='card-content-image'></div>
                        </div>
                        <div className='card'>
                            <div className='card-title'>
                                <div className='title-image'></div>
                                <div className='title-name'>今日挂号数</div>
                            </div>
                            <div className='card-content-image'></div>
                        </div>
                        <div className='card'>
                            <div className='card-title'>
                                <div className='title-image'></div>
                                <div className='title-name'>今日挂号数</div>
                            </div>
                            <div className='card-content-image'></div>
                        </div>
                        <div className='card'>
                            <div className='card-title'>
                                <div className='title-image'></div>
                                <div className='title-name'>今日挂号数</div>
                            </div>
                            <div className='card-content-image'></div>
                        </div>
                        <div className='card'>
                            <div className='card-title'>
                                <div className='title-image'></div>
                                <div className='title-name'>今日挂号数</div>
                            </div>
                            <div className='card-content-image'></div>
                        </div>
                    </div>
                    <div className='outpatient-middle-echarts'></div>
                </div>
                <div className='outpatient-right' >
                    <div className='outpatient-right-manage'>
                        <div className='outpatient-right-manage-card'>
                            <div className='manage-title'>人员管理</div>
                            <div className='manage-content'>
                                <div className='manage-content-top'>
                                    <div className='manage-content-bg'></div>
                                    <div className='manage-content-bg'></div>
                                    <div className='manage-content-bg'></div>
                                </div>
                                <div className='manage-content-bottom'>
                                    <div className='manage-content-bg'></div>
                                    <div className='manage-content-bg'></div>
                                    <div className='manage-content-bg'></div>
                                </div>
                            </div>
                        </div>
                        <div className='outpatient-right-manage-card' style={{ marginTop: '1vw' }}>
                            <div className='manage-title'>院感管理</div>
                            <div className='manage-content'>
                                <div ref={chartmanage} style={{ width: '32vw', height: '14vw' }} />
                            </div>
                        </div>
                        <div className='outpatient-right-manage-card' style={{ marginTop: '1vw' }}>
                            <div className='manage-title'>医院质量</div>
                            <div className='manage-content'>
                                <div ref={chartmanages} style={{ width: '100%', height: '100%' }} />
                            </div>
                        </div>
                    </div>
                    <div className='outpatient-right-stats'>
                        <div className='outpatient-right-stats-card'>
                            <div className='manage-title'>高耗材统计</div>
                            <div className='manage-content'>
                                <div ref={chartstats} style={{ width: '100%', height: '100%' }} />
                            </div>
                        </div>
                        <div className='outpatient-right-stats-card' style={{ marginTop: '1vw' }}>
                            <div className='manage-title'>药品消耗统计</div>
                            <div className='manage-content'>
                                <div ref={chartLine} style={{ width: '100%', height: '100%' }} />
                            </div>
                        </div>
                        <div className='outpatient-right-stats-card' style={{ marginTop: '1vw' }}>
                            <div className='manage-title'>安全数据</div>
                            <div className='manage-content'>
                                <div ref={chartpie} style={{ width: '100%', height: '100%' }} />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
}

export default OutpatientEchart;